﻿@using Resource;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    @{ await Html.RenderPartialAsync("/Views/Shared/_LayoutScript.cshtml"); }
    @{ await Html.RenderPartialAsync("/Views/Shared/_StyleCss.cshtml"); }

    <link href="/css/TestProd.css?v=@DateTime.Now.Ticks" rel="stylesheet" />
    <style>
        .show_mode {
            border-radius: 0.1rem;
            position: absolute;
            z-index: 99;
            height: 10.6rem;
            width: 100%;
            /*text-align: center;*/
            background: #a2c2e2;
            display: none;
        }

        .contentdetail {
            background-color: white;
            height: 10.4rem;
            width: 100%;
            padding: .1rem .3rem .1rem .3rem;
            color: black;
        }

        .show_mode > .contentdetail > div {
            color: black;
            height: 33.3%;
            width: 50%;
            float: left;
            border-block: solid #ffffff 1px;
        }

        .show_mode > .contentdetail > div > label {
            color: black;
        }

        .detail {
            color: black;
            background-color: #dfe4ee;
            height: 3rem;
            width: 100%;
        }

        .mode_close {
            float: right;
        }

        .mode_close:hover {
            background-color: #848690;
        }

        .ZebraNo {
            color: black;
            background-color: #e8f1f9;
        }

        .ZebraTo {
            color: black;
            background-color: #ffffff;
        }

        .note {
            color: red;
            font-size: 0.15rem;
            font-weight: bolder;
        }

        .devicedetailt {
            color: black;
            border: 1px solid #007297;
            margin-top: 16.5%;
            position: absolute;
            top: -28%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: none;
            width: 100.2%;
            height: 112%;
            text-align: center;
            padding: 0.12rem;
            background-color: #fff;
            border-radius: 0.1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .tester_hour {
            float: left;
        }

        #myTable {
            color: black !important;
        }

        /*table滚动条*/
        #tester_table {
            color: black;
            font-size: 0.125rem;
            overflow-y: auto;
        }

        table {
            color: black;
            width: 100%;
            border-collapse: collapse;
            /*table-layout: fixed;*/
        }

        thead {
            color: black;
            text-align: center;
            margin: auto;
            /*height: 0.2rem;*/
            position: sticky;
            top: 0;
            background-color: #a2c2e2;
            /*#a1e1e1;*/
        }

        thead > tr {
            color: black;
            font-size: 0.13rem;
            height: 0.5rem;
        }

        th, td {
            color: black;
            padding: 0.05rem;
            /*border: 1px solid #0aa9cd;*/
            border: 1px solid #c2c3c4;
        }

        tfoot {
            font-size: 0.13rem;
            position: sticky;
            bottom: 0;
            background-color: #a2c2e2; /*#a1e1e1*/
            /* height: 0.45rem;*/
        }

        tbody:hover .zebracro {
            color: black;
            background-color: #164362;
        }

        .tabletd {
            color: black;
            text-align: center;
        }

        .chart {
            color: black;
            padding: 0.2rem 0.2rem;
            border-top: none;
            width: 100%;
            height: 4.7rem;
        }
        /*设备状态*/
        .legend {
            display: flex;
            justify-content: center;
            margin-bottom: 0.2rem;
        }

        .legend > span {
            padding: 1px;
            text-align: center;
            /*border-radius: 1pc;*/
            font-size: 0.12rem;
            width: 0.6rem;
            margin: 0 0.1rem;
        }

        #devicecontent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 100%;
            height: calc(100% - 0.25rem);
            /*margin-bottom: 0.1rem;*/
            /* justify-content: center;*/
            /*滚动条*/
            /* overflow: auto;*/
        }

        .devic {
            display: inline-block;
            width: 0.25rem;
            height: 0.25rem;
            border-radius: 50%;
            color: white;
            font-size: 0.1rem;
            line-height: 0.2rem;
            margin-bottom: 0.5vh;
            position: relative;
            /*呼吸灯*/
            /*animation: devic 3s ease-in-out infinite;*/
            animation: devic 2s linear infinite;
            /*图标*/
            /*background: url(/images/facility.png) no-repeat center;*/
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
            position: relative;
            overflow: hidden;
        }

        .devic::before,
        .devic::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            animation: inherit;
            animation-delay: 1s;
        }

        .devic::after {
            animation-delay: 2s;
        }

        @@keyframes devic {
            0% {
                box-shadow: 0 0 0 0.12rem var(--ripple-color);
            }
            100% {
                box-shadow: 0 0 0 0.25rem rgba(255,255,255, 0);
            }
        }

        .divfolt {
            margin: 0 0.12rem;
            padding: 0.1rem 0;
            width: 10%;
            height: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .divfolt:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .divfolt p {
            font-size: 0.1rem;
            margin: 0.1rem;
        }

        .circle {
            display: inline-block;
            width: 0.16rem;
            height: 0.16rem;
            border-radius: 50%;
            margin-right: 0.2vw;
            /*根据父元素垂直居中*/
            vertical-align: middle;
        }

        .await {
            background-color: rgba(38, 154, 188, 1);
        }

        .inidle {
            background-color: rgba(246, 139, 167, 1);
        }

        .breakdown {
            background-color: rgba(172, 41, 37, 1);
        }

        .debug, .unproduced {
            background-color: rgba(213, 133, 18, 1);
        }

        .normal {
            background-color: rgba(57, 132, 57, 1);
        }
        /*END 设备状态*/

    </style>
    <title>TestProd</title>
</head>
<body class="fill-parent" style="overflow-y: hidden">
    <div class="main">
        <div class="header">
            <div class="header-left fl">
                <img src="/images/logo.png?v=@DateTime.Now.Ticks" class="scaled-image" draggable="false" oncontextmenu="return false;" ondragstart="return false;" />
            </div>
            <div class="quer">
                <spn>
                    <div id="query">
                        <select id="cmb_classtype">
                            <option value="OTD">@Label.OTD</option>
                            <option value="YTD">@Label.YTD</option>
                        </select>
                        <select id="cmb_prod_type" name="ProdType" placeholder="select prodtype">
                            <option value="ALL">@Label.ALL</option>
                            <option value="Normal">@Label.Fresh</option>
                            <option value="Rework">@Label.Rework</option>
                        </select>
                        <select id="cmb_proj_code">
                            <option value="ALL">@Label.ALL</option>
                        </select>
                        <select id="cmb_process">
                            <option value="ALL">@Label.PleaseSelect</option>
                        </select>
                    </div>
                </spn>
            </div>
            <div class="btn">
                <spn>
                    <div id="query">
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Desktop</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard.exe?v={DateTime.Now.Ticks}") download>@Label.Local</a>
                                <a class="menudropdown" href=@Html.Raw($"https://dashboard.li.lumentuminc.net/API/DesktopApp/Dashboard_lnk.zip?v={DateTime.Now.Ticks}") download>@Label.Shortcut</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Data@Label.Datum</button>
                            <div class="dropdown-content">
                                <a id="btn_query" class="menudropdown" onclick="TestDataExport('TestData')">@Label.Data@Label.Export</a>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="dropbtn">@Label.Language</button>
                            <div class="dropdown-content">
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.CNLANGUAGE')">@Label.Chinese</a>
                                <a class="menudropdown" onclick="setLanguageCookie('@Const.USLANGUAGE')">@Label.English</a>
                            </div>
                        </div>
                        <button class="modalBtn dimension">@Label.Full</button>
                    </div>
                </spn>
            </div>
            <div class="header-center fl">
                <div class="header-title"></div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl" id="time"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'left-top','Tab1',process_hour_prod_Chart)">@Html.Raw(Label.Process + Label.Hour + Label.Total + Label.Output)</button>
                    </div>
                    <div id="Tab1" class="tabcontent"></div>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="tab">
                        <button class="timerate tablinks active" onclick="OpenTab(event,'left-bottom','dev',dev_state_Chart)">@Html.Raw(Label.Current + Label.Equipment + Label.Status)</button>
                        @* # 暂停 优化 设备利用率 *@
                        @*<button class="soe tablinks" onclick="OpenTab(event,'left-bottom','Tab2',GetUtilizationRate)">@Html.Raw(Label.Equipment + Label.Time + Label.Utilization)</button>*@
                    </div>
                    <div id="dev" class="tabcontent" style="position: relative;">
                        <div id="Tab2" class="tabcontent"></div>
                    </div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="tab">
                        <button class="tablinks active" onclick="OpenTab(event,'right-top','Tab3',operator_prod_Chart)">@Html.Raw(Label.OTD + Label.People + Label.Output)</button>
                        <button class="tablinks" onclick="OpenTab(event,'right-top','Tab3',dev_hour_prod_Chart)">@Html.Raw(Label.OTD + Label.Equipment + Label.Output)</button>
                    </div>
                    <div id="Tab3" class="tabcontent"></div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="tab" style=" padding: 0.14rem 0.16rem;">
                        <select id="tester-dropdown"></select>
                        <select id="item-dropdown"></select>
                        <div style="float: right;"><button id="testitme_but" onclick="Detail_dev_hour_test_itme_Chart()">@Html.Raw(Label.Tests + Label.Item + Label.Analysis)</button></div>
                    </div>
                    <div id="Tab4" class="tabcontent"></div>
                </div>
            </div>
        </div>
        <div class="show_mode">
            <div style="width:100%; height:0.3rem;" >
            <div class="mode_close" style="height:100%;margin-right:10px;line-height:0.3rem">关闭<label style="font-size:0.2rem">&times;</label></div></div>
            <div class="contentdetail"></div>
        </div>
    </div>

    <script type="text/javascript" href="?v=@DateTime.Now.Ticks">
        //模板初始化配置
        $(".show_mode").css("display", "none");
        $(document).ready(function () {
            var whei = $(window).height();
            $("html").css({ fontSize: whei / 12.5 });
            $(window).resize(function () {
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    var whei = $(window).height();
                    $("html").css({ fontSize: whei / 12.5 });
                }
                else {
                    var whei = $(window).width();
                    $("html").css({ fontSize: whei / 22 })
                }
            });

            /*当前时间*/
            function numberToUpperCase(number) {
                var uppercaseMonths = [
                    '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ];
                return uppercaseMonths[number - 1];
            }
            var myDate = new Date();
            var result = numberToUpperCase(myDate.getMonth() + 1);
            $('.header-title').html("@Html.Raw(Label.Board_TestProcessCapacity)");
            function getTime() {
                var myDate = new Date();
                var myYear = myDate.getFullYear(); //年
                var myMonth = myDate.getMonth() + 1; //月
                var myToday = myDate.getDate(); //日
                var myDay = myDate.getDay(); //星期
                var myHour = myDate.getHours(); //小时
                var myMinute = myDate.getMinutes(); //分钟
                var mySecond = myDate.getSeconds(); //秒数
                var week = ['@Label.Sunday', '@Label.Monday', '@Label.Tuesday', '@Label.Wednesday', '@Label.Thursday', '@Label.Friday', '@Label.Saturday'];
                var nowTime;

                nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
                $('#time').html(nowTime);
            };
            function fillZero(str) {
                var realNum;
                if (str < 10) {
                    realNum = '0' + str;
                } else {
                    realNum = str;
                }
                return realNum;
            }
            setInterval(getTime, 1000);

            // 设置全屏
            $('.dimension').on('click', function (e) {
                var element = document.documentElement;
                if ($(".dimension").text() == "@Html.Raw(Label.Full)") {
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.mozRequestFullScreen) {       //兼容火狐
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullscreen) {    //兼容谷歌
                        element.webkitRequestFullscreen();
                    } else if (element.msRequestFullscreen) {        //兼容IE
                        element.msRequestFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Exit+Label.Full)");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    $(".dimension").text("@Html.Raw(Label.Full)");
                }
            });
        });
        $(document).on('change', '#cmb_classtype', function () {
            var classtype = $(this).val();
            if (classtype) {
                var headerTitle;
                if (classtype == "OTD") {
                    $(".soe").show();
                    headerTitle = `OTD @Html.Raw(Label.Board_TestProcessCapacity)`;
                    $("div.title").attr("title", function () {
                        return $(this).text($(this).text().replace("@Html.Raw(Label.YTD)", "@Html.Raw(Label.OTD)"));
                    });
                } else if (classtype == "YTD") {
                    $(".soe").hide(); $(".soe").addClass("hidden");
                    headerTitle = `YTD @Html.Raw(Label.Board_TestProcessCapacity)`;
                    $("div.title").attr("title", function () {
                        return $(this).text($(this).text().replace("@Html.Raw(Label.OTD)", "@Html.Raw(Label.YTD)"));
                    });
                }
                var oldLabel = classtype === "OTD" ? '@Html.Raw(Label.YTD)' : '@Html.Raw(Label.OTD)';
                var newLabel = classtype === "OTD" ? '@Html.Raw(Label.OTD)' : '@Html.Raw(Label.YTD)';
                var regex = new RegExp(oldLabel, 'g');
                $('.tablinks').each(function () {
                    $(this).text($(this).text().replace(regex, newLabel));
                });
                $('.header-title').html(headerTitle);
            }
        });
        //图表自适应大小
        var chartIds = ['Tab1', 'Tab3'];
        function echartsautomatic() {
            var charts = [];
            chartIds.forEach(function (chartId) {
                var chart = echarts.init(document.getElementById(chartId));
                charts.push(chart);
            });
            window.onresize = function () {
                charts.forEach(function (chart) {
                    chart.resize();
                });
            };
        }
        $(window).on('resize', function () {
            echartsautomatic();
        });
        /*下拉框*/
        $(function () {
            var projectsele = $("#cmb_proj_code");
            var processsele = $("#cmb_process");
            var pam = {};
            loadData(projectsele, api + '/ReportAction/GetProjCode', true);
            projectsele.change(function () {
                pam.proj_code = $(this).val();
                loadData(processsele, api + '/ReportAction/GetTestProcess', true);
            });
            function loadData(selectElement, url, boolean) {
                $.ajax({
                    type: "POST",
                    url: url,
                    data: pam,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        selectdata = data.ReturnData;
                        selectElement.empty();
                        if (selectdata.length <= 0) {
                            var option = "<option>@Html.Raw(Label.No+Label.Correlation+Label.Data)</option>";
                            selectElement.append(option);
                            return;
                        }
                        if (boolean) {
                            selectElement.append("<option value=''>@Html.Raw(Label.PleaseSelect)...</option>");
                        } else {
                            selectElement.append("<option value='ALL'>@Html.Raw(Label.ALL)</option>");
                        }
                        $.each(selectdata, function (key, value) {
                            selectElement.append($('<option>', {
                                value: value.value,
                                text: value.text
                            }));
                        });
                    }
                });
            }
            $('#cmb_classtype').prop('selectedIndex', 0);
            $("#cmb_prod_type").prop('selectedIndex', 0);
            //$('#cmb_proj_code').prop('selectedIndex', 1).trigger('change');
            $('#cmb_proj_code').val('NCCSAD').trigger('change');
            $('#cmb_process').val('SIOB_BOND_PIC').trigger('change');
        });
        //选中自动查询
        $(document).on('change', '#cmb_classtype,#cmb_prod_type,#cmb_process', function () {
            $(".show_mode").css("display", "none");
            Query();
        });

        /*Tab手动切换*/
        function OpenTab(evt, panle, id, echar_name, itemindex = -1) {
            var i, tablinks;
            tablinks = document.getElementsByClassName(panle)[0].getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace("active", "");
            }
            evt.currentTarget.className += " active";
            //注销eacharts
            let chart = echarts.init(document.getElementById(id));
            chart.dispose();
            /*TabItem 页签滚动*/
            if (itemindex > -1) {
                var listContainer = document.getElementById("listContainer");
                var listItem = listContainer.children[itemindex];
                var scrollContainer = document.getElementById("scrollContainer");
                // 计算要滚动的距离
                var scrollLeft = listItem.offsetLeft - scrollContainer.offsetLeft;
                // 滚动到指定位置
                //scrollContainer.scrollLeft = scrollLeft;
                scrollContainer.scrollTo({
                    left: scrollLeft,
                    behavior: "smooth",
                });
            }
            /*委托事件*/
            echar_name();
            echartsautomatic();
        }
        //Tab页签定时切换
        var Tabtimer;
        function TabInterval() {
            clearInterval(Tabtimer);
            var i = 0;
            function clickButton(buttons) {
                //模拟触发按钮的 onclick 方法
                if (i === buttons.length) {
                    i = 0;
                    Query();
                }
                else {
                    buttons[i].click();
                    i = i + 1;
                }
            }
            /*clickButton();//初始化*/
            //每隔5m执行一次
            Tabtimer = setInterval(function () {
                clickButton($(".tablinks"));
                echartsautomatic();
            }, 10 * 60 * 1000);
        }

        function makeAjaxRequest(url, data) {
            return new Promise(function (resolve, reject) {
                $.ajax({
                    type: "POST",
                    url: api + url,
                    data: data,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        resolve(data.ReturnData);
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        var Tab = {};
        function GetToDayMachineCapacity() {
            var pam = {};
            pam.type = $('#cmb_prod_type').val();
            pam.proj_code = $('#cmb_proj_code').val();
            pam.process_id = $('#cmb_process').val();
            pam.header_key = $('#cmb_classtype').val();

            var selectedIndex = $('#cmb_process').prop('selectedIndex');
            if (selectedIndex != 0) {
                return makeAjaxRequest("/ReportAction/TestProcessPord", pam);
            }
        }
        //查询所有
        var Query = function () {
            Promise.all([GetToDayMachineCapacity()])
                .then(function (data) {
                    //Table1 工序每小时产出
                    //Table2 人员&设备产出
                    //Table3 人员每小时产出
                    //Table4 设备&人员产出
                    //Table5 设备每小时产出
                    //Table6 设备测试项散点图
                    //Table7 设备状态
                    Tab.Tab1 = data[0].Table;
                    Tab.Tab2 = data[0].Table1;
                    Tab.Tab3 = data[0].Table2;
                    Tab.Tab4 = data[0].Table3;
                    Tab.Tab5 = data[0].Table4;
                    Tab.Tab6 = data[0].Table5;
                    Tab.Tab7 = data[0].Table6;
                    process_hour_prod_Chart();
                    operator_prod_Chart();
                    //dev_hour_prod_Chart();
                    dev_hour_test_time_vaule_Chart();
                    dev_state_Chart();
                    echartsautomatic();

                })
                .catch(function (error) {
                });
            TabInterval();
        }

        $('.mode_close').click(function () {
            $(".show_mode").css("display", "none");
            $(".contentdetail").empty();
            $(".contentdetail div").remove();
        });

        /*导出生产数据*/
        var TestDataExport = function (type) {
            $('#btn_query').prop('disabled', true);
            ExportType = type;
            var formData = new FormData();
            formData.append('type', ExportType);
            formData.append('prodtype', $('#cmb_prod_type').val());
            formData.append('proj_code', $('#cmb_proj_code').val());
            formData.append('area', 'DG');
            var url = api + "/ReportAction/GetTestDateExport";
            PostExportToExcel(url, formData);
            alert("数据量过大。。。\n\n正在加速下载，请等待2分钟^_^");
        }

        //POST 参数不固定 导出
        var PostExportToExcel = function (url, formData) {
            //GET: var url = "http://localhost:44304/Dashboard/ExportToExcel?" + $.param(pam);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    $('#btn_query').prop('disabled', false);
                    var url = window.URL.createObjectURL(xhr.response);
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = ExportType.toLocaleUpperCase() + '.xlsx';
                    a.click();
                    window.URL.revokeObjectURL(url);
                }
            };
            xhr.send(formData);
        }

        /*图表随机颜色*/
        function getRandomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return '' + r + ',' + g + ',' + b + '';
        }
        var colors = ['0, 0, 255', '255, 165, 0', '255, 255, 0', '128, 0, 128', '0, 255, 255', '255, 0, 255', '0, 128, 0', '255, 192, 203', '255, 69, 0', '255, 20, 147', '0, 255, 127'];

        function updateChartOnChange() {
            dev_hour_test_time_vaule_Chart.updateChart();
        }
        $('#tester-dropdown').change(updateChartOnChange);
        $('#item-dropdown').change(updateChartOnChange);

        //1工序产出
        var process_hour_prod_Chart = function () {
            var chartDom = document.getElementById("Tab1");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            var data = Tab.Tab1;
            // 定义X轴和两个Y轴的数据
            var x_DataHour = data.map(function (item) {
                return parseInt(item.HOUR);
            });
            var yield = data.map(function (item) {
                return item ? ((item.PASS + item.ABORT) / item.INPUT) * 100 : 0;
            });
            var pass = data.map(function (item) {
                return item ? item.PASS : 0;
            });
            var abort = data.map(function (item) {
                return item ? item.ABORT : 0;
            });
            var fail = data.map(function (item) {
                return item ? item.FAIL : 0;
            });
            var target = data.map(function (item) {
                return item ? item.TARGET : 0;
            });
            var y_DataTarget = data.map(function (item) {
                return item ? item.TARGET : 0;
            });
            var maxInteger = Math.ceil(Math.max.apply(null, y_DataTarget));
            var vaulemax = Math.max.apply(null, pass);
            // 配置图表选项
            var option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET', 'PASS', 'ABORT','FAIL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}:${Math.round(p.value ? p.value:0)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '12%',
                    width: '92%'
                },
                color: ['#FF3374', '#F47E56', '#07C160'],
                legend: {
                    data: ['TARGET', 'PASS', 'ABORT', 'FAIL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x_DataHour.map(item => item + ':00'),
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.16rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    scale: true,
                    splitLine: { show: false },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    }
                },
                series: [
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        zlevel: 0,
                        data: target.map(item => parseInt(item) > 0 ? item : null),
                        smooth: true, lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC' } },
                        label: {
                            normal: {
                                show: true,
                                color: '#03BFE9'
                            }
                        }
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: fail.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'ABORT',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: abort.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                color: '#F47E56',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'PASS',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        data: pass.map(item => parseInt(item) > 0 ? item : null),
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            myChart.off('click');
            myChart.on('click', function (params) {
               Detail_prod_opdev_table_Chart();
            });
        }

        //2人员产出
        var operator_prod_Chart = function () {
            var chartDom = document.getElementById("Tab3");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            // 定义X轴和两个Y轴的数据
            var data = Tab.Tab2;
            var x_operator = data.map(function (item) {
                return item.OPERATOR;
            });
            var pass = data.map(function (item) {
                return item ? item.PASS : 0;
            });
            var abort = data.map(function (item) {
                return item ? item.ABORT : 0;
            });
            var fail = data.map(function (item) {
                return item ? item.FAIL : 0;
            });
            var yield = data.map(function (item) {
                return item ? item.YIELD : 0;
            });
            var target = data.map(function (item) {
                return item ? item.TARGET_VALUE : 0;
            });
            var InputData = data.map(function (item) {
                return item ? item.INPUT : 0;
            });
            var vaulemax = Math.max.apply(null, InputData);
            var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
            // 配置图表选项
            var option = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                textStyle: {
                    fontSize: '0.1rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        const order = ['TARGET', 'YIELD', 'PASS', 'ABORT','FAIL'];
                        let tooltipString = params
                            .sort((a, b) => order.indexOf(a.seriesName) - order.indexOf(b.seriesName))
                            .map(p => `${p.marker} ${p.seriesName}:${Math.round(p.value ? p.value : 0)}<br/>`)
                            .join('');
                        return tooltipString;
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    bottom: '12%',
                    width: '90%'
                },
                color: ['#FF3374','#F47E56','#07C160'],
                legend: {
                    data: ['TARGET', 'YIELD', 'PASS', 'ABORT', 'FAIL'],
                    width: '100%',
                    itemGap: 20,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff',
                        fontSize: '0.16rem'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x_operator,
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45,
                        color: '#fff',
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        max: yAxismax + (yAxismax/5),
                        interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                        scale: true,
                        splitLine: { show: false },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,
                        splitLine: { show: false },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: '0.16rem'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'TARGET',
                        type: 'line',
                        yAxisIndex: 0,
                        zlevel: 0,
                        data: target.map(item => parseInt(item) > 0 ? item : null),
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(3, 194, 236, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(3, 194, 236, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#03C2EC' } },
                        label: {
                            normal: {
                                show: true,
                                color: '#03BFE9'
                            }
                        }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        zlevel: 1,
                        data: yield.map(item => parseInt(item) > 0 ? item : 0),
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#edb217 ' } },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                rotate: yield.length > 20 ? -45 : 0,
                                offset: yield.length > 20 ? [0, -5] : [0, 0],
                                formatter: function (params) {return params.value + '%';},
                                color: '#E1AB19',
                                fontSize: '0.12rem',
                            }
                        }
                    },
                    {
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',
                        yAxisIndex: 0,
                        zlevel: 2,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: fail.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'ABORT',
                        type: 'bar',
                        stack: 'stack1',
                        yAxisIndex: 0,
                        zlevel: 2,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        data: abort.map(item => parseInt(item) > 0 ? item : null),
                        itemStyle: {
                            normal: {
                                color: '#F47E56',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'PASS',
                        type: 'bar',
                        stack: 'stack1',
                        yAxisIndex: 0,
                        zlevel: 2,
                        data: pass.map(item => parseInt(item) > 0 ? item : null),
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            var sparkletimer = setInterval(changeColor, 1000);
            function targetgaugeinput(operator) {
                const item = data.find(item => item.OPERATOR === operator);
                const targetValue = item ? item.TARGET_VALUE : 0;
                const inputValue = item ? item.INPUT : 0;
                return inputValue >= targetValue;
            }
            var type = 0;
            function changeColor() {
                option.series[2].itemStyle = {
                    normal: {
                        color: function (params) {
                            return (type === 0 || targetgaugeinput(params.name)) ? '#FF3374' : 'rgba(0,0,0,0)';
                        }
                    }
                };
                option.series[3].itemStyle = {
                    normal: {
                        color: function (params) {
                            return (type === 0 || targetgaugeinput(params.name)) ? '#F47E56' : 'rgba(0,0,0,0)';
                        }
                    }
                };
                option.series[4].itemStyle = {
                    normal: {
                        barBorderRadius: [10, 10, 0, 0],
                        color: function (params) {
                            return (type === 0 || targetgaugeinput(params.name)) ? '#07C160' : 'rgba(0,0,0,0)';
                        }
                    }
                };
                type = 1 - type;
                myChart.setOption(option, false);
                //clearInterval(sparkletimer);
                myChart.off('click');
                myChart.on('click', function (params) {
                    Detail_OperatorHourOutput_Chart(params.name);
                });
            }
            @*tools.loopShowTooltip(echarts.init(chart), option, { loopSeries: true });*@

        };

        //3设备产出
        var dev_hour_prod_Chart = function () {
            var opdev_output_data = [];
            var summaryData = {};
            $.each(Tab.Tab5, function (index, item) {
                var tester = item.TESTER;
                if ((parseInt(item.INPUT, 10) > 0 || parseInt(item.ABORT, 10) > 0)) {
                    if (!summaryData[tester]) {
                        summaryData[tester] = {
                            INPUT: 0,
                            PASS: 0,
                            ABORT: 0,
                            FAIL: 0,
                            YIELD: 0
                        };
                    }
                    //汇总 INPUT、PASS、ABORT、FAIL、YIELD
                    summaryData[tester].INPUT += parseInt(item.INPUT, 10);
                    summaryData[tester].PASS += parseInt(item.PASS, 10);
                    summaryData[tester].ABORT += parseInt(item.ABORT, 10);
                    summaryData[tester].FAIL += parseInt(item.FAIL, 10);
                }
            });
            //计算YIELD
            for (var tester in summaryData) {
                if (summaryData.hasOwnProperty(tester)) {
                    var totalInput = summaryData[tester].INPUT;
                    if (totalInput > 0) {
                        summaryData[tester].YIELD = ((summaryData[tester].PASS + summaryData[tester].ABORT) / totalInput) * 100;
                    } else {
                        summaryData[tester].YIELD = 0;
                    }
                }
            }
            //组装Arry
            for (var tester in summaryData) {
                if (summaryData.hasOwnProperty(tester)) {
                    opdev_output_data.push({
                        TESTER: tester,
                        INPUT: summaryData[tester].INPUT,
                        PASS: summaryData[tester].PASS,
                        ABORT: summaryData[tester].ABORT,
                        FAIL: summaryData[tester].FAIL,
                        YIELD: summaryData[tester].YIELD.toFixed(2)
                    });
                }
            }
            var chartDom = document.getElementById("Tab3");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            // 定义X轴和两个Y轴的数据
            var tester = opdev_output_data.map(function (item) {
                return item.TESTER;
            });
            var pass = opdev_output_data.map(function (item) {
                return item ? item.PASS : 0;
            });
            var abort = opdev_output_data.map(function (item) {
                return item ? item.ABORT : 0;
            });
            var fail = opdev_output_data.map(function (item) {
                return item ? item.FAIL : 0;
            });
            var yield = opdev_output_data.map(function (item) {
                return item ? item.YIELD : 0;
            });
            var InputData = opdev_output_data.map(function (item) {
                return item ? item.INPUT : 0;
            });
            var vaulemax = Math.max.apply(null, InputData);
            var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
            var options = {
                label: {
                    show: true,
                    color: 'white',
                    fontSize: '0.12rem',
                    fontWeight: 'bold'
                },
                textStyle: {
                    fontSize: '0.1rem'
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    textStyle: {
                        fontSize: '0.12rem',
                        align: 'left'
                    },
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['PASS', 'ABORT', 'FAIL', 'YIELD'],
                    width: '100%',
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: 'white',
                        fontSize: '0.16rem'
                    }
                },
                grid: {
                    top: '10%',
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis:
                {
                    yAxisIndex: 9,
                    type: 'category',
                    data: tester,
                    textStyle: {
                        color: 'white',
                        fontSize: '0.12rem'
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            color: 'white',
                            fontSize: '0.12rem'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        max: yAxismax + (yAxismax / 5),
                        interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'white',
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 120,
                        interval: 20,
                        scale: true,//刻度范围一致
                        splitLine: { show: false },
                        axisTick: { //y轴刻度线
                            show: true
                        },
                        axisLine: { //y轴
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                return value + '%';
                            },
                            textStyle: {
                                color: 'white',
                                fontSize: '0.14rem',
                                fontWeight: 'bold'
                            }
                        }
                    }
                ],
                series: [
                    {
                        data: fail.map(item => parseInt(item) > 0 ? item : null),
                        name: 'FAIL',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: '#FF3374',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        data: abort.map(item => parseInt(item) > 0 ? item : null),
                        name: 'ABORT',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                color: '#F47E56',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        data: pass.map(item => parseInt(item) > 0 ? item : null),
                        name: 'PASS',
                        type: 'bar',
                        stack: 'stack1',
                        zlevel: 1,
                        barCategoryGap: '50%',
                        barWidth: '40%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [10, 10, 0, 0],
                                color: '#07C160',
                                shadowColor: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    },
                    {
                        name: 'YIELD',
                        type: 'line',
                        yAxisIndex: 1,
                        zlevel: 0,
                        data: yield.map(item => parseInt(item) > 0 ? item : 0),
                        lineStyle: { normal: { width: 3 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(237, 178, 23, 0.5)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(237, 178, 23, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 12
                            }
                        },
                        itemStyle: { normal: { color: '#EDB217 ' } },
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                rotate: yield.length > 20 ? -45 : 0,
                                offset: yield.length > 20 ? [0, -5] : [0, 0],
                                formatter: function (params) { return parseInt(params.value) + '%'; },
                                color: '#E1AB19',
                                fontSize: '0.12rem',
                            }
                        }
                    }
                ]
            };
            myChart.setOption(options);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
            myChart.off('click');
            myChart.on('click', function (params) {
                Detail_dev_hour_prod_Chart(params.name);
            });
        }

        //4设备测试项 散点图
        var dev_hour_test_time_vaule_Chart = function () {
            var chartDom = document.getElementById("Tab4");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            function dropdown(selectid, data, bool) {
                selectid.empty();
                if (bool) {
                    selectid.append($('<option></option>').text('ALL').val('ALL'));
                }
                $.each(data, function (index, value) {
                    selectid.append($('<option></option>').text(value).val(value));
                });
                selectid.prop('selectedIndex', 0);
            }
            var select_tester = $('#tester-dropdown');
            var tester = Array.from(new Set(Tab.Tab6.map(item => item.TESTER))).sort();
            dropdown(select_tester, tester, false);
            const tester_value = $('#tester-dropdown').val();
            var select_item = $('#item-dropdown');
            var item = Array.from(new Set(Tab.Tab6.filter(item => item.TESTER === tester_value).map(item => item.ITEM))).sort();
            dropdown(select_item, item, true);
            const item_value = $('#item-dropdown').val();
            var dev_hour_test_time_data = Tab.Tab6.filter(function (item) {
                return item.TESTER == tester_value && (item_value === 'ALL' || item.ITEM === item_value);
            });
            const test_time = dev_hour_test_time_data.map(item => item.TEST_TIME);
            var hour = Array.from(new Set(dev_hour_test_time_data.map(function (item) {
                return item.HOUR;
            })));
            var test_item = Array.from(new Set(dev_hour_test_time_data.filter(item => item.TESTER === tester_value).map(item => item.ITEM)));
            const series = test_item.map(itemValue => ({
                type: 'scatter',
                symbolSize: 9,
                name: itemValue,
                data: dev_hour_test_time_data
                    .filter(d => d.ITEM === itemValue)
                    .map(d => [d.TEST_TIME, d.ITEM_VALUE])
            }));
            const myChart = echarts.init(chartDom);
            const option = {
                title: { show: false },
                textStyle: {
                    color: 'white',
                    fontSize: '0.16rem'
                },
                tooltip: {
                    trigger: 'axis',
                    show: true,
                    //confine: true,
                    //appendToBody: true,
                    formatter: function (params) {
                        const autoWidth = Math.ceil(params.length / (params.length > 160 ? 50 : 30));
                        let tooltipHtml = `<span style="color: #666;font-size:0.14rem;font-weight: normal;">${params[0].axisValueLabel}</span><br/><div style="color: black;width: ${autoWidth * 220}px;display: flex;flex-flow: column wrap; justify-content: flex-start;height:${Math.ceil((params.length / autoWidth)) * 17}px; ">`
                        params.forEach((item) => {
                            tooltipHtml += `
                            <div style="font-size:0.12rem;width:${((1 / autoWidth) * 100)}%;height:0.18rem;display: flex;flex-flow: row nowrap; justify-content: flex-start;">
                                <span style="color: #666;font-size:0.12rem;font-weight: normal;flex: 1; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${item.marker}${item.seriesName}：</span>
                                <span style="color: black;font-size:0.12rem;float:right;margin-right: 10px;">${item.data[1]}</span>
                            </div>`
                        });
                        tooltipHtml += `</div>`
                        return tooltipHtml;
                    },
                    position: (point, params, dom, rect, size) => {
                        let x = point[0];
                        let y = point[1];
                        const { contentSize, viewSize } = size;
                        const maxX = viewSize[0] - contentSize[0];
                        const maxY = viewSize[1] - contentSize[1];
                        if (x > maxX) {
                            x -= contentSize[0];
                        }
                        if (y > maxY) {
                            y = maxY
                        }
                        return [x, y];
                    },
                    textStyle: {
                        fontSize: '0.14rem'
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: 'white'
                        }
                    }
                },
                grid: {
                    top: '10%',
                    left: '5%',
                    right: '2%',
                    bottom: '15%'
                },
                xAxis: [
                    {
                        type: 'time',
                        data: test_time,
                        show: false,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            fontSize: '0.16rem',
                            formatter: function (value) {
                                var date = new Date(value);
                                var hours = date.getHours();
                                return hours + ":00";
                            }
                        }
                    },
                    {
                        type: 'category',
                        data: hour.map(item => item + ':00'),
                        show: true,
                        axisPointer: {
                            type: 'shadow'
                        },
                        splitLine: {
                            show: true,
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 45,
                            color: '#fff',
                            fontSize: '0.16rem'
                        },
                        position: "bottom",
                        offset: 20
                    }
                ],
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        /*lineStyle: {type: 'dashed'}*/
                    },
                    axisTick: {show: true},
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '0.16rem'
                        }
                    }
                },
                legend: {
                    show: true,
                    type: 'scroll',
                    width: '100%',
                    data: test_item,
                    orient: 'horizontal',
                    pageIconColor: 'white',
                    pageTextStyle: {
                        color: 'white',
                    },
                    itemGap: 10,
                    itemWidth: 10,
                    itemHeight: 10,
                    color: 'white',
                    textStyle: {
                        color: 'white',
                        fontSize: '0.16rem'
                    }
                },
                series: series
            };

            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
            //updateChart
            dev_hour_test_time_vaule_Chart.updateChart = function () {
                const tester_combox_val = $('#tester-dropdown').val();
                const item_combox_val = $('#item-dropdown').val();
                const filteredData = Tab.Tab6.filter(item => (
                    (tester_combox_val == 'ALL'   || item.TESTER == tester_combox_val) && (item_combox_val == 'ALL' || item.ITEM == item_combox_val)
                ));
                const test_time = filteredData.map(item => item.TEST_TIME);
                const hour = Array.from(new Set(filteredData.map(function (item) {
                    return item.HOUR;
                })));
                const test_item = Array.from(new Set(filteredData.filter(item => item.TESTER === tester_combox_val).map(item => item.ITEM)));
                const series = test_item.map(itemValue => ({
                    type: 'scatter',
                    symbolSize: 9,
                    name: itemValue,
                    data: filteredData.filter(d => d.ITEM === itemValue).map(d => [d.TEST_TIME, d.ITEM_VALUE])
                }));
                var option = myChart.getOption();
                option.series = series;
                option.legend.data = test_item;
                option.xAxis[0].data = test_time;
                option.xAxis[1].data = hour.map(item => item + ':00');
                myChart.setOption(option,true);
            }
        }

        //4设备状态
        var dev_state_Chart = function () {
            var dev_state_data = Tab.Tab7;
            if (dev_state_data.length > 0) {
                $("#dev").empty();
                var deviceHTML = ``;
                for (var i = 0; i < dev_state_data.length; i++) {
                    var statuscssl;
                    switch (parseInt(dev_state_data[i].STATUSCODE)) {
                        //1未产出\2 运行\3故障停机\4调试
                        case 1:
                            statuscssl = "await";
                            deviceHTML += `
                                    <div class="divfolt" onclick="Detail_dev_hour_prod_Chart('${dev_state_data[i].TESTER}')">
                                        <p class="devic" style="--ripple-color: rgba(38, 154, 188, 1);background: url(/images/equipment/dev_wait.png);background-size: 100%;"></p>
                                        <p>${dev_state_data[i].TESTER}</p>
                                    </div>`;
                            break;
                        case 2:
                            statuscssl = "normal";
                            deviceHTML += `
                                    <div class="divfolt" onclick="Detail_dev_hour_prod_Chart('${dev_state_data[i].TESTER}')">
                                        <p class="devic" style="--ripple-color: rgba(57, 132, 57, 1);background: url(/images/equipment/dev_run.png);background-size: 100%;"></p>
                                        <p>${dev_state_data[i].TESTER}</p>
                                    </div>`;
                            break;
                        case 3:
                            statuscssl = "breakdown";
                            deviceHTML += `
                                    <div class="divfolt" onclick="Detail_dev_hour_prod_Chart('${dev_state_data[i].TESTER}')">
                                        <p class="devic" style="--ripple-color: rgba(172, 41, 37, 1);background: url(/images/equipment/dev_abnormal.png);background-size: 100%;"></p>
                                        <p>${dev_state_data[i].TESTER}</p>
                                    </div>`;
                            break;
                        case 4:
                            statuscssl = "debug";
                            deviceHTML += `
                                    <div class="divfolt" onclick="Detail_dev_hour_prod_Chart('${dev_state_data[i].TESTER}')">
                                        <p class="devic" style="--ripple-color: rgba(213, 133, 18, 1);background: url(/images/equipment/dev_debug.png);background-size: 100%;"></p>
                                        <p>${dev_state_data[i].TESTER}</p>
                                    </div>`;
                            break;
                    }
                    /*deviceHTML += `<div class="divfolt"><p class="devic ${statuscssl}"></p><p>${ProcessEquipmentDt[i].EQUIPMENT_NAME}</p></div>`;*/
                }
                var TabContentHTML = `
                        <div class="legend">
                            <span class="normal"><label>运行</label></span>
                            <span class="await"><label>未产出</label></span>
                            <span class="breakdown"><label>停机</label></span>
                            <span class="debug"><label>调试</label></span>
                        </div>
                        <div id="devicecontent">${deviceHTML}</div>`;
                $("#dev").html(TabContentHTML);
                if (dev_state_data.length > 32) {
                    $("#devicecontent").css('overflow', 'auto').css('height', 'calc(100% - 0.5rem)');
                }
                else {
                    $("#devicecontent").css('overflow', 'hidden').css('height', 'calc(100% - 0.3rem)');
                }
            }
        }

        /*下钻*/
        //1工序产出明细
        var Detail_prod_opdev_table_Chart = function () {
            $(".contentdetail").empty();
            /*工序每小时详细产出*/
            var tod_prod_data = [];
            $.each(Tab.Tab1, function (index, item) {
                if (item.STATE == 'Y') {
                    var newItem = {
                        PROCESS_ID: item.PROCESS_ID,
                        DAY: item.DAY,
                        HOUR: parseInt(item.HOUR),
                        INPUT: parseInt(item.TOD_INPUT),
                        PASS: parseInt(item.TOD_PASS),
                        ABORT: parseInt(item.TOD_ABORT),
                        FAIL: parseInt(item.TOD_FAIL),
                        YIELD: ((parseInt(item.TOD_PASS) + parseInt(item.TOD_ABORT)) / parseInt(item.TOD_INPUT) * 100)
                    };
                    tod_prod_data.push(newItem);
                }
            });
            //动态生成表头
            var tod_prod_header = "";
            var tod_prod_header_keys = Object.keys(tod_prod_data[0]);
            tod_prod_header_keys.forEach(function (header) {
                tod_prod_header = tod_prod_header + '<th>' + header + '</th>';
            });
            // OPERATOR汇总
            var tod_prod_hour = $.map(tod_prod_data, function (item) {
                return parseInt(item.HOUR);
            });
            var tod_prod_hour_unique = $.unique(tod_prod_hour);
            var count_tod_prod_hour = tod_prod_hour_unique.length;
            //生成表体内容
            var tod_input = 0;
            var tod_pass = 0;
            var tod_abort = 0;
            var tod_fail = 0;
            var tod_tabtbody = '';
            tod_prod_data.forEach(function (row, index) {
                index++;
                var tod_prod_tdbody = '';
                tod_prod_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        tod_input = tod_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        tod_pass = tod_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        tod_abort = tod_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        tod_fail = tod_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    tod_prod_tdbody = tod_prod_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var tod_prod_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${tod_prod_tdbody}</tr>`;
                tod_tabtbody = tod_tabtbody + tod_prod_trbody;
            });
            var tod_prod_tab_html = `
            <div><label>${tod_prod_data[0].PROCESS_ID}工序小时产出</label>
                <div id="tod_prod" class="tod_prod detail"></div>
            </div>
            <div><label>${tod_prod_data[0].PROCESS_ID}工序小时产出列表</label>
                <div id="tester_table" class="tester_hour opdev detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${tod_prod_header}</tr></thead>
                        <tbody id="yield_tbody">${tod_tabtbody}</tbody>
                        <tfoot><tr><td></td><td>生产小时:${count_tod_prod_hour}</td><td></td><td>${tod_input}</td><td>${tod_pass}</td><td>${tod_abort}</td><td>${tod_fail}</td><td>${(tod_pass + tod_abort > 0 ? ((tod_pass + tod_abort) / tod_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            /*工序每小时详细产出Chart*/
            var prodHourOutputChart = function () {
                var xAxisData = tod_prod_data.map(function (item) {
                    return parseInt(item.HOUR);
                });
                var pass = tod_prod_data.map(function (item) {
                    return item ? item.PASS : 0;
                });
                var abort = tod_prod_data.map(function (item) {
                    return item ? item.ABORT : 0;
                });
                var fail = tod_prod_data.map(function (item) {
                    return item ? item.FAIL : 0;
                });
                var yield = tod_prod_data.map(function (item) {
                    return parseInt(item.YIELD.replace(/\%/g, ''));
                });
                var InputData = tod_prod_data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var chartDom = document.getElementById("tod_prod");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'ABORT','FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xAxisData.map(item =>item+":00"),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: abort.map(item => parseInt(item) > 0 ? item : null),
                            name: 'ABORT',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#F47E56',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            /*人机 table*/
            var opdev_data = [];
            var opdev_tabdata = Tab.Tab2.map(function (item) {
                var newItem = {
                    PROCESS_ID: item.PROCESS_ID,
                    OPERATOR: item.OPERATOR,
                    TESTER: item.TESTER,
                    INPUT: parseInt(item.INPUT),
                    PASS: parseInt(item.PASS),
                    ABORT: parseInt(item.ABORT),
                    FAIL: parseInt(item.FAIL),
                    YIELD: parseInt(item.YIELD)
                };
                opdev_data.push(newItem);
            });
            //动态生成表头
            var opdev_header = "";
            var opdev_header_keys = Object.keys(opdev_data[0]);
            opdev_header_keys.forEach(function (header) {
                opdev_header = opdev_header + '<th>' + header + '</th>';
            });
            // OPERATOR汇总
            var opdev_operator = $.map(opdev_data, function (item) {
                return item.OPERATOR;
            });
            var opdev_operator_unique = $.unique(opdev_operator);
            var count_opdev_operator = opdev_operator_unique.length;
            //生成表体内容
            var opdev_sum_input = 0;
            var opdev_sum_pass = 0;
            var opdev_sum_abort = 0;
            var opdev_sum_fail = 0;
            var opdev_tabtbody = '';
            opdev_data.forEach(function (row, index) {
                index++;
                var opdev_tdbody = '';
                opdev_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        opdev_sum_input = opdev_sum_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        opdev_sum_pass = opdev_sum_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        opdev_sum_abort = opdev_sum_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        opdev_sum_fail = opdev_sum_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    opdev_tdbody = opdev_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var opdev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${opdev_tdbody}</tr>`;
                opdev_tabtbody = opdev_tabtbody + opdev_trbody;
            });
            var opdev_tab_html = `
            <div><label>${opdev_data[0].PROCESS_ID}工序人员小时生产趋势图</label>
                <div id="devhour" class="devhour detail"></div>
            </div>
            <div><label>${opdev_data[0].PROCESS_ID}工序人机配列表</label>
                <div id="tester_table" class="tester_hour opdev detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${opdev_header}</tr></thead>
                        <tbody id="yield_tbody">${opdev_tabtbody}</tbody>
                        <tfoot><tr><td></td><td>人员统计:${count_opdev_operator}</td><td></td><td>${opdev_sum_input}</td><td>${opdev_sum_pass}</td><td>${opdev_sum_abort}</td><td>${opdev_sum_fail}</td><td>${(opdev_sum_input + opdev_sum_abort > 0 ? ((opdev_sum_pass + opdev_sum_abort) / opdev_sum_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            /*人员小时产出Chart*/
            var op_hourChart = function () {
                var ophour_data = Tab.Tab3;
                var chartDom = document.getElementById("devhour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 获取所有不重复的tester值
                var operator = Array.from(new Set(ophour_data.map(item => item.OPERATOR)));
                // 获取所有不重复的HOUR值
                var hours = Array.from(new Set(ophour_data.map(item => parseInt(item.HOUR))));
                // 根据tester和HOUR生成series数据
                var seriesData = operator.map(operator => {
                    return {
                        name: operator,
                        type: 'line',
                        data: hours.map(hour => {
                            var item = ophour_data.find(d => d.OPERATOR === operator && d.HOUR === hour);
                            return item ? item.INPUT : 0;
                        })
                    };
                });
                var option = {
                    textStyle: {
                        color: 'black',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'black'
                            }
                        }
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: operator,
                        orient: 'horizontal',
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: '#666',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'black'
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '1%',
                        bottom: '17%',
                        width: '93%'
                    },
                    xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: hours.map(function (item) {
                            return item + ':00';
                        }),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {show: false}
                        },
                        {
                            data: ["白班", "晚班"],
                            axisLabel: { interval: 0 },
                            position: 'bottom',
                            offset: 20,
                            //axisTick: { show: false },
                            //axisLine: { show: false }
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: seriesData.map(function (data, index) {
                        var color = colors[index % colors.length];
                        return {
                            name: data.name,
                            type: 'line',
                            data: data.data,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgb(' + color + ')'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(' + color + ',0.2)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgb(' + color + ',0.1)'
                                    }], false),
                                    shadowColor: 'rgb(' + color + ',0.1)',
                                    shadowBlur: 12
                                }
                            }
                        };
                    })
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            /*设备 人员 table*/
            var devprod_data = Tab.Tab4;
            //动态生成表头
            var devprod_header = "";
            var devprod_header_keys = Object.keys(devprod_data[0]);
            devprod_header_keys.forEach(function (header) {
                devprod_header = devprod_header + '<th>' + header + '</th>';
            });
            // Testers汇总
            var devprod_tester = $.map(devprod_data, function (item) {
                return item.TESTER;
            });
            var devprod_tester_unique = $.unique(devprod_tester);
            var count_devprod_tester = devprod_tester_unique.length;
            //生成表体内容
            var devprod_sum_input = 0;
            var devprod_sum_pass = 0;
            var devprod_sum_abort = 0;
            var devprod_sum_fail = 0;
            var devprod_tabtbody = '';
            devprod_data.forEach(function (row, index) {
                index++;
                var devprod_tdbody = '';
                devprod_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                         devprod_sum_input =  devprod_sum_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        devprod_sum_pass =  devprod_sum_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        devprod_sum_abort = devprod_sum_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        devprod_sum_fail =  devprod_sum_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    devprod_tdbody = devprod_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var devprod_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${devprod_tdbody}</tr>`;
                devprod_tabtbody = devprod_tabtbody + devprod_trbody;
            });
            var odevprod_tab_html = `
            <div><label>${devprod_data[0].PROCESS_ID}工序设备小时生产趋势图</label>
                <div id="ophour" class="ophour detail"></div>
            </div>
            <div><label>${devprod_data[0].PROCESS_ID}工序设备列表</label>
                <div id="tester_table" class="tester_hour devprod detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${devprod_header}</tr></thead>
                        <tbody id="yield_tbody">${devprod_tabtbody}</tbody>
                        <tfoot><tr><td></td><td>设备统计:${count_devprod_tester}</td><td></td><td>${devprod_sum_input}</td><td>${devprod_sum_pass}</td><td>${devprod_sum_abort}</td><td>${devprod_sum_fail}</td><td>${(devprod_sum_input + devprod_sum_abort > 0 ? ((devprod_sum_pass + devprod_sum_abort) / devprod_sum_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            /*设备小时产出Chart*/
            var devhourChart = function () {
                var devhour_data = Tab.Tab5;
                var chartDom = document.getElementById("ophour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 获取所有不重复的tester值
                var tester = Array.from(new Set(devhour_data.map(item => item.TESTER)));
                // 获取所有不重复的HOUR值
                var hours = Array.from(new Set(devhour_data.map(item => parseInt(item.HOUR))));
                // 根据tester和HOUR生成series数据
                var seriesData = tester.map(tester => {
                    return {
                        name: tester,
                        type: 'line',
                        data: hours.map(hour => {
                            var item = devhour_data.find(d => d.TESTER === tester && d.HOUR === hour);
                            return item ? item.INPUT : 0;
                        })
                    };
                });
                var option = {
                    textStyle: {
                        color: 'black',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'black'
                            }
                        }
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: tester,
                        orient: 'horizontal',
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: '#666',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'black'
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '1%',
                        bottom: '17%',
                        width: '93%'
                    },
                    xAxis:[
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: hours.map(item => item + ':00'),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {show: false}
                        },
                        {
                            data: ["白班", "晚班"],
                            axisLabel: { interval: 0 },
                            position: 'bottom',
                            offset: 20,
                            //axisTick: { show: false },
                            //axisLine: { show: false }
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: seriesData.map(function (data, index) {
                        var color = colors[index % colors.length];
                        return {
                            name: data.name,
                            type: 'line',
                            data: data.data,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgb(' + color + ')'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(' + color + ',0.2)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgb(' + color + ',0.1)'
                                    }], false),
                                    shadowColor: 'rgb(' + color + ',0.1)',
                                    shadowBlur: 12
                                }
                            }
                        };
                    })
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(tod_prod_tab_html+opdev_tab_html + odevprod_tab_html);
            $(".show_mode").css("display", "block");
            op_hourChart();
            devhourChart();
            prodHourOutputChart();
        }

        //2员工产出明细
        var Detail_OperatorHourOutput_Chart = function (operator) {
            $(".contentdetail").empty();
            /*某员工每小时产出*/
            var dev_hour_data = Tab.Tab3.filter(function (item) {
                return item.OPERATOR == operator;
            });
            //动态生成表头
            var operator_hour_header = "";
            var operator_hour_header_keys = Object.keys(dev_hour_data[0]);
            operator_hour_header_keys.forEach(function (header) {
                operator_hour_header = operator_hour_header + '<th>' + header + '</th>';
            });
            //HOUR汇总
            var operator_hour = $.map(dev_hour_data, function (item) {
                return (parseInt(item.INPUT) > 0 || parseInt(item.ABORT) > 0) == true ? parseInt(item.HOUR) : 0;
            });
            var operator_hour_unique = $.unique(operator_hour);
            var count_operator_hour = operator_hour_unique.length;
            //生成表体内容
            var operator_hour_input = 0;
            var operator_hour_pass = 0;
            var operator_hour_abort = 0;
            var operator_hour_fail = 0;
            var operator_hour_tabtbody = '';
            dev_hour_data.forEach(function (row, index) {
                index++;
                var operator_hour_tdbody = '';
                operator_hour_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        operator_hour_input = operator_hour_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        operator_hour_pass = operator_hour_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        operator_hour_abort = operator_hour_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        operator_hour_fail = operator_hour_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    operator_hour_tdbody = operator_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var operator_hour_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${operator_hour_tdbody}</tr>`;
                operator_hour_tabtbody = operator_hour_tabtbody + operator_hour_trbody;
            });
            var operator_hour_tdbody_tab_html = `
            <div><label>员工${operator}小时产出</label>
                <div id="operator_hour" class="operator_hour detail"></div>
            </div>
            <div><label>员工${operator}小时产出列表</label>
                <div id="tester_table" class="operator_hour opdev detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${operator_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${operator_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>生产小时:${count_operator_hour}</td><td></td><td>${operator_hour_input}</td><td>${operator_hour_pass}</td><td>${operator_hour_abort}</td><td>${operator_hour_fail}</td><td>${(operator_hour_pass + operator_hour_abort > 0 ? ((operator_hour_pass + operator_hour_abort) / operator_hour_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //某员工每小时产出Chart
            var OperatorhouroutputChart = function (operator) {
                var data = dev_hour_data.filter(function (item) {
                    return item.OPERATOR === operator;
                });
                var xAxis_Data = data.map(function (item) {
                    return item ? parseInt(item.HOUR) : 0;
                });
                var pass = data.map(function (item) {
                    return item ? parseInt(item.PASS) : 0;
                });
                var abort = data.map(function (item) {
                    return item ? parseInt(item.ABORT) : 0;
                });
                var fail = data.map(function (item) {
                    return item ? parseInt(item.FAIL) : 0;
                });
                var yield = data.map(function (item) {
                    return parseInt(item.YIELD.replace(/\%/g, ''));
                });
                var InputData = data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var chartDom = document.getElementById("operator_hour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    title: {
                        text: operator,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'ABORT', 'FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xAxis_Data.map(item => item + ':00'),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: abort.map(item => parseInt(item) > 0 ? item : null),
                            name: 'ABORT',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#F47E56',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            /*某员工在做的设备*/
            var operator_dev_data = [];
            var operator_dev_tabdata = Tab.Tab2.map(function (item) {
                if (item.OPERATOR && item.OPERATOR.includes(operator)) {
                    var newItem = {
                        PROCESS_ID: item.PROCESS_ID,
                        OPERATOR: item.OPERATOR,
                        TESTER: item.TESTER,
                        INPUT: parseInt(item.INPUT),
                        PASS: parseInt(item.PASS),
                        ABORT: parseInt(item.ABORT),
                        FAIL: parseInt(item.FAIL),
                        YIELD: parseInt(item.YIELD)
                    };
                    operator_dev_data.push(newItem);
                }
            });
            //动态生成表头
            var operator_dev_header = "";
            var operator_dev_header_keys = Object.keys(operator_dev_data[0]);
            operator_dev_header_keys.forEach(function (header) {
                operator_dev_header = operator_dev_header + '<th>' + header + '</th>';
            });
            //TESTER汇总
            var operator_dev = $.map(operator_dev_data, function (item) {
                return item.TESTER;
            });
            var operator_dev_unique = $.unique(operator_dev);
            var count_operator_dev = operator_dev_unique.toString().split(',').length;
            //生成表体内容
            var operator_dev_input = 0;
            var operator_dev_pass = 0;
            var operator_dev_abort = 0;
            var operator_dev_fail = 0;
            var operator_dev_tabtbody = '';
            operator_dev_data.forEach(function (row, index) {
                index++;
                var operator_dev_tdbody = '';
                operator_dev_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        operator_dev_input = operator_dev_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        operator_dev_pass = operator_dev_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        operator_dev_abort = operator_dev_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        operator_dev_fail = operator_dev_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    operator_dev_tdbody = operator_dev_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var operator_dev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${operator_dev_tdbody}</tr>`;
                operator_dev_tabtbody = operator_dev_tabtbody + operator_dev_trbody;
            });
            var operator_dev_tdbody_tab_html = `
            <div><label>员工${operator}关联设备产出统计</label>
                <div id="operator_dev" class="operator_dev detail"></div>
            </div>
            <div><label>员工${operator}操机数列表</label>
                <div id="tester_table" class="operator_dev opdev detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${operator_dev_header}</tr></thead>
                        <tbody id="yield_tbody">${operator_dev_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>操机数:${count_operator_dev}</td><td>${operator_dev_input}</td><td>${operator_dev_pass}</td><td>${operator_dev_abort}</td><td>${operator_dev_fail}</td><td>${(operator_dev_pass + operator_dev_abort > 0 ? ((operator_dev_pass + operator_dev_abort) / operator_dev_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //某员工在做的设备Chart
            var OpdevoutputChart = function (operator) {
                var opdev_output_data = [];
                var summaryData = {};
                $.each(Tab.Tab5, function (index, item) {
                    var tester = item.TESTER;
                    if (item.OPERATOR == operator && operator_dev_unique.toString().includes(tester) && (parseInt(item.INPUT, 10) > 0 || parseInt(item.ABORT, 10) > 0)) {
                        if (!summaryData[tester]) {
                            summaryData[tester] = {
                                INPUT: 0,
                                PASS: 0,
                                ABORT: 0,
                                FAIL: 0,
                                YIELD: 0
                            };
                        }
                        //汇总 INPUT、PASS、ABORT、FAIL、YIELD
                        summaryData[tester].INPUT += parseInt(item.INPUT, 10);
                        summaryData[tester].PASS += parseInt(item.PASS, 10);
                        summaryData[tester].ABORT += parseInt(item.ABORT, 10);
                        summaryData[tester].FAIL += parseInt(item.FAIL, 10);
                    }
                });
                //计算YIELD
                for (var tester in summaryData) {
                    if (summaryData.hasOwnProperty(tester)) {
                        var totalInput = summaryData[tester].INPUT;
                        if (totalInput > 0) {
                            summaryData[tester].YIELD = ((summaryData[tester].PASS + summaryData[tester].ABORT) / totalInput) * 100;
                        } else {
                            summaryData[tester].YIELD = 0;
                        }
                    }
                }
                //组装Arry
                for (var tester in summaryData) {
                    if (summaryData.hasOwnProperty(tester)) {
                        opdev_output_data.push({
                            TESTER: tester,
                            INPUT: summaryData[tester].INPUT,
                            PASS: summaryData[tester].PASS,
                            ABORT: summaryData[tester].ABORT,
                            FAIL: summaryData[tester].FAIL,
                            YIELD: summaryData[tester].YIELD.toFixed(2)
                        });
                    }
                }
                var chartDom = document.getElementById("operator_dev");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 定义X轴和两个Y轴的数据
                var tester = opdev_output_data.map(function (item) {
                    return item.TESTER;
                });
                var pass = opdev_output_data.map(function (item) {
                    return item ? item.PASS : 0;
                });
                var abort = opdev_output_data.map(function (item) {
                    return item ? item.ABORT : 0;
                });
                var fail = opdev_output_data.map(function (item) {
                    return item ? item.FAIL : 0;
                });
                var yield = opdev_output_data.map(function (item) {
                    return item ? item.YIELD : 0;
                });
                var InputData = opdev_output_data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    title: {
                        text: operator,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'ABORT', 'FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: tester,
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            zlevel: 1,
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: abort.map(item => parseInt(item) > 0 ? item : null),
                            name: 'ABORT',
                            type: 'bar',
                            stack: 'stack1',
                            zlevel: 1,
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#F47E56',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            zlevel: 1,
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            zlevel: 0,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(options);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
                myChart.off('click');
                myChart.on('click', function (params) {
                    //某人员某台设备详细产出
                    var nodev_hour_data = Tab.Tab5.filter(item => item.TESTER == params.name  && item.OPERATOR == operator);
                    //动态生成表头
                    var nodev_hour_header = "";
                    var nodev_hour_header_keys = Object.keys(nodev_hour_data[0]);
                    nodev_hour_header_keys.forEach(function (header) {
                        nodev_hour_header = nodev_hour_header + '<th>' + header + '</th>';
                    });
                    //TESTER汇总
                    var nodev_hour_tester = $.map(nodev_hour_data, function (item) {
                        return item.TESTER;
                    });
                    var nodev_hour_tester_unique = $.unique(nodev_hour_tester);
                    var count_nodev_hour = nodev_hour_tester_unique.toString().split(',').length;
                    //生成表体内容
                    var nodev_hour_input = 0;
                    var nodev_hour_pass = 0;
                    var nodev_hour_abort = 0;
                    var nodev_hour_fail = 0;
                    var nodev_hour_tabtbody = '';
                    nodev_hour_data.forEach(function (row, index) {
                        index++;
                        var nodev_hour_tdbody = '';
                        nodev_hour_header_keys.forEach(function (header, columnindex) {
                            if (header === "INPUT") {
                                nodev_hour_input = nodev_hour_input + parseInt(row[header]);
                            }
                            if (header === "PASS") {
                                nodev_hour_pass = nodev_hour_pass + parseInt(row[header]);
                            }
                            if (header === "ABORT") {
                                nodev_hour_abort = nodev_hour_abort + parseInt(row[header]);
                            }
                            if (header === "FAIL") {
                                nodev_hour_fail = nodev_hour_fail + parseInt(row[header]);
                            }
                            if (header === "YIELD") {
                                row[header] = parseInt(row[header]).toFixed(2) + '%';
                            }
                            nodev_hour_tdbody = nodev_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                        });
                        var operator_dev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${nodev_hour_tdbody}</tr>`;
                        nodev_hour_tabtbody = nodev_hour_tabtbody + operator_dev_trbody;
                    });
                    var nodev_hour_tab_html = `
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${nodev_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${nodev_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>设备数:${count_nodev_hour}</td><td></td><td></td><td>${nodev_hour_input}</td><td>${nodev_hour_pass}</td><td>${nodev_hour_abort}</td><td>${nodev_hour_fail}</td><td>${(nodev_hour_fail + nodev_hour_abort > 0 ? ((nodev_hour_pass + nodev_hour_abort) / nodev_hour_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>`
                    $(".nodev_hour_table").empty();
                    $(".nodev_hour_table").append(nodev_hour_tab_html);
                    //char
                    var prodHourOutputChart = function () {
                        var xData = nodev_hour_data.map(function (item) {
                            return parseInt(item.HOUR);
                        });
                        var pass = nodev_hour_data.map(function (item) {
                            return item ? parseInt(item.PASS) : 0;
                        });
                        var abort = nodev_hour_data.map(function (item) {
                            return item ? parseInt(item.ABORT) : 0;
                        });
                        var fail = nodev_hour_data.map(function (item) {
                            return item ? parseInt(item.FAIL) : 0;
                        });
                        var yield = nodev_hour_data.map(function (item) {
                            return parseInt(item.YIELD.replace(/\%/g, ''));
                        });
                        var ChartTo = document.getElementById("operator_dev_hour");
                        if (ChartTo) {
                            echarts.dispose(ChartTo);
                        }
                        var myToChart = echarts.init(ChartTo);
                        var options = {
                            label: {
                                show: true,
                                color: 'white',
                                fontSize: '0.12rem',
                                fontWeight: 'bold'
                            },
                            title: {
                                text: params.name,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    textAlign: 'center'
                                }
                            },
                            textStyle: {
                                fontSize: '0.1rem'
                            },
                            tooltip: {
                                show: true,
                                trigger: 'axis',
                                textStyle: {
                                    fontSize: '0.12rem',
                                    align: 'left'
                                },
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: ['PASS', 'ABORT', 'FAIL', 'YIELD'],
                                width: '100%',
                                itemGap: 10,
                                itemWidth: 10,
                                itemHeight: 10,
                                textStyle: {
                                    fontSize: '0.12rem'
                                }
                            },
                            grid: {
                                top: '25%',
                                left: '2%',
                                right: '2%',
                                bottom: '5%',
                                containLabel: true
                            },
                            xAxis:
                            {
                                yAxisIndex: 9,
                                type: 'category',
                                data: xData.map(item => item + ':00'),
                                textStyle: {
                                    fontSize: '0.12rem'
                                },
                                axisLabel: {
                                    interval: 0,
                                    rotate: 45,
                                    textStyle: {
                                        fontSize: '0.12rem'
                                    }
                                }
                            },
                            yAxis: [
                                {
                                    type: 'value',
                                    min: 0,
                                    splitLine: { show: false },
                                    axisTick: { //y轴刻度线
                                        show: true
                                    },
                                    axisLine: { //y轴
                                        show: true
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        textStyle: {
                                            fontSize: '0.14rem',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                {
                                    type: 'value',
                                    min: 0,
                                    max: 120,
                                    interval: 20,
                                    scale: true,//刻度范围一致
                                    splitLine: { show: false },
                                    axisTick: { //y轴刻度线
                                        show: true
                                    },
                                    axisLine: { //y轴
                                        show: true
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        formatter: function (value) {
                                            return value + '%';
                                        },
                                        textStyle: {
                                            fontSize: '0.14rem',
                                            fontWeight: 'bold'
                                        }
                                    }
                                }
                            ],
                            series: [
                                {
                                    data: fail.map(item => parseInt(item) > 0 ? item : null),
                                    name: 'FAIL',
                                    type: 'bar',
                                    stack: 'stack1',
                                    barCategoryGap: '50%',
                                    barWidth: '40%',
                                    itemStyle: {
                                        normal: {
                                            color: '#FF3374',
                                            shadowColor: 'rgba(0, 0, 0, 0.1)'
                                        }
                                    }
                                },
                                {
                                    data: abort.map(item => parseInt(item) > 0 ? item : null),
                                    name: 'ABORT',
                                    type: 'bar',
                                    stack: 'stack1',
                                    barCategoryGap: '50%',
                                    barWidth: '40%',
                                    itemStyle: {
                                        normal: {
                                            color: '#F47E56',
                                            shadowColor: 'rgba(0, 0, 0, 0.1)'
                                        }
                                    }
                                },
                                {
                                    data: pass.map(item => parseInt(item) > 0 ? item : null),
                                    name: 'PASS',
                                    type: 'bar',
                                    stack: 'stack1',
                                    barCategoryGap: '50%',
                                    barWidth: '40%',
                                    itemStyle: {
                                        normal: {
                                            barBorderRadius: [10, 10, 0, 0],
                                            color: '#07C160',
                                            shadowColor: 'rgba(0, 0, 0, 0.1)'
                                        }
                                    }
                                },
                                {
                                    name: 'YIELD',
                                    type: 'line',
                                    yAxisIndex: 1,
                                    data: yield.map(item => parseInt(item) > 0 ? item : 0),
                                    lineStyle: { normal: { width: 3 } },
                                    areaStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: 'rgba(237, 178, 23, 0.5)'
                                            }, {
                                                offset: 0.8,
                                                color: 'rgba(237, 178, 23, 0.1)'
                                            }], false),
                                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                                            shadowBlur: 12
                                        }
                                    },
                                    itemStyle: { normal: { color: '#EDB217 ' } },
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            formatter: function (params) { return params.value + '%'; },
                                            color: '#E1AB19'
                                        }
                                    }

                                }
                            ]
                        };
                        myToChart.setOption(options);
                        window.addEventListener('resize', function () {
                            myToChart.resize();
                        });
                    }
                    prodHourOutputChart();
                });
            }

            /*员工多个设备每小时产出 */
            var operator_dev_hour_data = Tab.Tab5.filter(item => operator_dev_unique.toString().includes(item.TESTER) && item.OPERATOR == operator);
            //动态生成表头
            var operator_dev_hour_header = "";
            var operator_dev_hour_header_keys = Object.keys(operator_dev_hour_data[0]);
            operator_dev_hour_header_keys.forEach(function (header) {
                operator_dev_hour_header = operator_dev_hour_header + '<th>' + header + '</th>';
            });
            //TESTER汇总
            var operator_dev_hour_tester = $.map(operator_dev_hour_data, function (item) {
                return item.TESTER;
            });
            var operator_dev_hour_tester_unique = $.unique(operator_dev_hour_tester);
            var count_operator_dev_hour = operator_dev_hour_tester_unique.toString().split(',').length;
            //生成表体内容
            var operator_dev_hour_input = 0;
            var operator_dev_hour_pass = 0;
            var operator_dev_hour_abort = 0;
            var operator_dev_hour_fail = 0;
            var operator_dev_hour_tabtbody = '';
            operator_dev_hour_data.forEach(function (row, index) {
                index++;
                var operator_dev_hour_tdbody = '';
                operator_dev_hour_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        operator_dev_hour_input = operator_dev_hour_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        operator_dev_hour_pass = operator_dev_hour_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        operator_dev_hour_abort = operator_dev_hour_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        operator_dev_hour_fail = operator_dev_hour_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    operator_dev_hour_tdbody = operator_dev_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var operator_dev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${operator_dev_hour_tdbody}</tr>`;
                operator_dev_hour_tabtbody = operator_dev_hour_tabtbody + operator_dev_trbody;
            });
            var operator_dev_hour_tdbody_tab_html = `
            <div><label>员工${operator}关联设备每小时生产趋势</label>
                <div id="operator_dev_hour" class="operator_dev_hour nodev_hour_char detail"></div>
            </div>
            <div><label>员工${operator}关联设备每小时产出列表</label>
                <div id="tester_table" class="operator_dev_hour nodev_hour_table opdev detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${operator_dev_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${operator_dev_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>设备数:${count_operator_dev_hour}</td><td></td><td></td><td>${operator_dev_hour_input}</td><td>${operator_dev_hour_pass}</td><td>${operator_dev_hour_abort}</td><td>${operator_dev_hour_fail}</td><td>${(operator_dev_hour_pass + operator_dev_hour_abort > 0 ? ((operator_dev_hour_pass + operator_dev_hour_abort) / operator_dev_hour_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            /*员工多个设备每小时产出 Chart*/
            var OperatordevilhouroutputChart = function (operator) {
                var seldata = Tab.Tab5.filter(item => operator_dev_unique.toString().includes(item.TESTER) && item.OPERATOR == operator);
                var chartDom = document.getElementById("operator_dev_hour");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 获取所有不重复的tester值
                var tester = Array.from(new Set(seldata.map(item => item.TESTER)));
                // 获取所有不重复的HOUR值
                var hourstime = Array.from(new Set(seldata.map(item => item.HOUR)));
                // 根据tester和HOUR生成series数据
                var InputData = seldata.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var seriesData = tester.map(tester => {
                    return {
                        name: tester,
                        type: 'line',
                        data: hourstime.map(hour => {
                            var item = seldata.find(d => d.TESTER === tester && d.HOUR === hour);
                            return item ? item.INPUT : 0;
                        })
                    };
                });
                var option = {
                    textStyle: {
                        color: 'black',
                        fontSize: '0.16rem'
                    },
                    title: {
                        text: operator,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'black'
                            }
                        }
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: tester,
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: '#666',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'black'
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '1%',
                        bottom: '17%',
                        width: '93%'
                    },
                    xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: hourstime.map(item => item + ':00'),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                        }, {
                            data: ["白班", "晚班"],
                            axisLabel: { interval: 0 },
                            position: 'bottom',
                            offset: 20,
                            //axisTick: { show: false },
                            //axisLine: { show: false }
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        max: yAxismax + (yAxismax / 5),
                        interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: seriesData.map(function (data, index) {
                        var color = colors[index % colors.length];
                        return {
                            name: data.name,
                            type: 'line',
                            data: data.data,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgb(' + color + ')'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(' + color + ',0.2)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgb(' + color + ',0.1)'
                                    }], false),
                                    shadowColor: 'rgb(' + color + ',0.1)',
                                    shadowBlur: 12
                                }
                            }
                        };
                    })
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(operator_hour_tdbody_tab_html + operator_dev_tdbody_tab_html + operator_dev_hour_tdbody_tab_html);
            $(".show_mode").css("display", "block");
            OperatorhouroutputChart(operator);
            OpdevoutputChart(operator);
            OperatordevilhouroutputChart(operator)

        }

        //3设备产出明细
        var Detail_dev_hour_prod_Chart = function (tester) {
            $(".contentdetail").empty();
            /*某台设备小时产出*/
            const select_dev_hour_data = Tab.Tab5.filter(item => item.TESTER == tester);
            //数据分组
            const mergedData = select_dev_hour_data.reduce((accumulator, { PROCESS_ID, TESTER, DAY, HOUR, INPUT, PASS, ABORT, FAIL, YIELD, OPERATOR }) => {
                const key = `${PROCESS_ID}|${TESTER}|${DAY}|${HOUR}`;
                if (!accumulator[key]) {
                    accumulator[key] = {
                        PROCESS_ID, TESTER, DAY, HOUR, INPUT, PASS, ABORT, FAIL,
                        YIELD: parseFloat(YIELD),
                        OPERATOR: [OPERATOR]
                    };
                } else {
                    const existingItem = accumulator[key];
                    existingItem.OPERATOR.push(OPERATOR);
                    existingItem.INPUT += INPUT;
                    existingItem.PASS += PASS;
                    existingItem.ABORT += ABORT;
                    existingItem.FAIL += FAIL;
                    existingItem.YIELD = (existingItem.PASS + existingItem.ABORT) > 0 ? ((existingItem.PASS + existingItem.ABORT) / existingItem.INPUT) * 100 : 0;
                }
                return accumulator;
            }, {});
            // 将累加器对象转换回数组格式，并格式化YIELD和OPERATOR
            const dev_hour_data = Object.values(mergedData).map(item => ({
                PROCESS_ID: item.PROCESS_ID,
                TESTER: item.TESTER,
                OPERATOR: item.OPERATOR.join(','),
                DAY: item.DAY,
                HOUR: item.HOUR,
                INPUT: item.INPUT,
                PASS: item.PASS,
                ABORT: item.ABORT,
                FAIL: item.FAIL,
                YIELD: `${item.YIELD.toFixed(2)}%`
            }));
            //动态生成表头
            var dev_hour_header = "";
            var dev_hour_header_keys = Object.keys(dev_hour_data[0]);
            dev_hour_header_keys.forEach(function (header) {
                dev_hour_header = dev_hour_header + '<th>' + header + '</th>';
            });
            //Operators汇总
            const uniqueOperators = select_dev_hour_data.reduce((accumulator, currentValue) => {
                accumulator.add(currentValue.OPERATOR);
                return accumulator;
            }, new Set());
            const operatorCount = uniqueOperators.size;
            //生成表体内容
            var dev_hour_input = 0;
            var dev_hour_pass = 0;
            var dev_hour_abort = 0;
            var dev_hour_fail = 0;
            var dev_hour_tabtbody = '';
            dev_hour_data.forEach(function (row, index) {
                index++;
                var dev_hour_tdbody = '';
                dev_hour_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        dev_hour_input = dev_hour_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        dev_hour_pass = dev_hour_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        dev_hour_abort = dev_hour_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        dev_hour_fail = dev_hour_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    dev_hour_tdbody = dev_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var operator_dev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${dev_hour_tdbody}</tr>`;
                dev_hour_tabtbody = dev_hour_tabtbody + operator_dev_trbody;
            });
            var dev_hour_tab_html = `
            <div><label>设备${tester}每小时产出</label>
                <div id="detail_dev_hour_prod_chart" class="detail_dev_hour_prod_chart detail"></div>
            </div>
            <div><label>设备${tester}每小时产出列表</label>
                <div id="tester_table" class="detail_dev_hour_prod_table detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${dev_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${dev_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>人员数:${operatorCount}</td><td></td><td></td><td>${dev_hour_input}</td><td>${dev_hour_pass}</td><td>${dev_hour_abort}</td><td>${dev_hour_fail}</td><td>${(dev_hour_pass + dev_hour_abort > 0 ? ((dev_hour_pass + dev_hour_abort) / dev_hour_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //某台设备小时产出Chart
            var dev_hour_data_chart = function () {
                var xData = dev_hour_data.map(function (item) {
                    return parseInt(item.HOUR);
                });
                var pass = dev_hour_data.map(function (item) {
                    return item ? parseInt(item.PASS) : 0;
                });
                var abort = dev_hour_data.map(function (item) {
                    return item ? parseInt(item.ABORT) : 0;
                });
                var fail = dev_hour_data.map(function (item) {
                    return item ? parseInt(item.FAIL) : 0;
                });
                var yield = dev_hour_data.map(function (item) {
                    return parseInt(item.YIELD.replace(/\%/g, ''));
                });
                var InputData = dev_hour_data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var ChartTo = document.getElementById("detail_dev_hour_prod_chart");
                if (ChartTo) {
                    echarts.dispose(ChartTo);
                }
                var myToChart = echarts.init(ChartTo);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    title: {
                        text: tester,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'ABORT', 'FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '25%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xData.map(item => item + ':00'),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: abort.map(item => parseInt(item) > 0 ? item : null),
                            name: 'ABORT',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#F47E56',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }
                        }
                    ]
                };
                myToChart.setOption(options);
                window.addEventListener('resize', function () {
                    myToChart.resize();
                });
            }

            /*某设备关联人员产出*/
            var dev_op_hour_header = "";
            var dev_op_hour_header_keys = Object.keys(select_dev_hour_data[0]);
            dev_op_hour_header_keys.forEach(function (header) {
                dev_op_hour_header = dev_op_hour_header + '<th>' + header + '</th>';
            });
            //TESTER汇总
            var operator_dev = $.map(select_dev_hour_data, function (item) {
                return item.TESTER;
            });
            var operator_dev_unique = $.unique(operator_dev);
            var count_operator_dev = operator_dev_unique.toString().split(',').length;
            //生成表体内容
            var dev_op_hour_input = 0;
            var dev_op_hour_pass = 0;
            var dev_op_hour_abort = 0;
            var dev_op_hour_fail = 0;
            var dev_op_hour_tabtbody = '';
            select_dev_hour_data.forEach(function (row, index) {
                index++;
                var dev_op_hour_tdbody = '';
                dev_op_hour_header_keys.forEach(function (header, columnindex) {
                    if (header === "INPUT") {
                        dev_op_hour_input = dev_op_hour_input + parseInt(row[header]);
                    }
                    if (header === "PASS") {
                        dev_op_hour_pass = dev_op_hour_pass + parseInt(row[header]);
                    }
                    if (header === "ABORT") {
                        dev_op_hour_abort = dev_op_hour_abort + parseInt(row[header]);
                    }
                    if (header === "FAIL") {
                        dev_op_hour_fail = dev_op_hour_fail + parseInt(row[header]);
                    }
                    if (header === "YIELD") {
                        row[header] = parseInt(row[header]).toFixed(2) + '%';
                    }
                    dev_op_hour_tdbody = dev_op_hour_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "DAY" ? row[header].replace(/\T/g, '&emsp;') : row[header]}</td>`;
                });
                var operator_dev_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${dev_op_hour_tdbody}</tr>`;
                dev_op_hour_tabtbody = dev_op_hour_tabtbody + operator_dev_trbody;
            });
            var dev_op_hour_tab_html = `
            <div><label>设备${tester}关联人员生产趋势图</label>
                <div id="detail_dev_op_hour_prod_chart" class="detail_dev_op_hour_prod_chart detail"></div>
            </div>
            <div><label>设备${tester}关联人员生产列表</label>
                <div id="tester_table" class="detail_dev_op_hour_prod_table detail">
                    <table id="myTable" class="DataSheet" border="1" style="color:black;width: 100%; height: 100%;">
                        <thead><tr>${dev_op_hour_header}</tr></thead>
                        <tbody id="yield_tbody">${dev_op_hour_tabtbody}</tbody>
                        <tfoot><tr><td></td><td></td><td>设备数:${count_operator_dev}</td><td></td><td></td><td>${dev_op_hour_input}</td><td>${dev_op_hour_pass}</td><td>${dev_op_hour_abort}</td><td>${dev_op_hour_fail}</td><td>${(dev_op_hour_pass + dev_op_hour_abort > 0 ? ((dev_op_hour_pass + dev_op_hour_abort) / dev_op_hour_input * 100) : 0).toFixed(2) + '%'}</td></tr></tfoot>
                    </table>
                </div>
            </div>`;
            //某设备关联人员产出Chart
            var dev_op_hour_chart = function () {
                var chartDom = document.getElementById("detail_dev_op_hour_prod_chart");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 获取所有不重复的tester值
                var operator = Array.from(new Set(select_dev_hour_data.map(item => item.OPERATOR)));
                // 获取所有不重复的HOUR值
                var hours = Array.from(new Set(select_dev_hour_data.map(item => parseInt(item.HOUR))));
                // 根据tester和HOUR生成series数据
                var seriesData = operator.map(operator => {
                    return {
                        name: operator,
                        type: 'line',
                        data: hours.map(hour => {
                            var item = select_dev_hour_data.find(d => d.OPERATOR === operator && d.HOUR === hour);
                            return item ? item.INPUT : 0;
                        })
                    };
                });
                var option = {
                    textStyle: {
                        color: 'black',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'black'
                            }
                        }
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: operator,
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: '#666',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'black'
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '1%',
                        bottom: '17%',
                        width: '93%',
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: hours.map(function (item) {
                            return item + ':00';
                        }),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    }, {
                        data: ["白班", "晚班"],
                        axisLabel: { interval: 0 },
                        position: 'bottom',
                        offset: 20,
                        //axisTick: { show: false },
                        //axisLine: { show: false }
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: seriesData.map(function (data, index) {
                        var color = colors[index % colors.length];
                        return {
                            name: data.name,
                            type: 'line',
                            data: data.data,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgb(' + color + ')'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(' + color + ',0.2)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgb(' + color + ',0.1)'
                                    }], false),
                                    shadowColor: 'rgb(' + color + ',0.1)',
                                    shadowBlur: 12
                                }
                            }
                        };
                    })
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
                myChart.off("click");
                myChart.on('click', function (params) {
                    dev_op_hour_prod_chart(tester, params.seriesName);
                });
            }

            var dev_op_hour_prod_tab_html = `
            <div style="width:100%;"><label>设备${tester}员工每小时产出</label>
                <div id="dev_op_hour_prod_chart" class="dev_op_hour_prod_chart detail"></div>
            </div>`;
            /*某设备关联人员小时产出*/
            const passCounts = select_dev_hour_data.reduce((counts, item) => {
                const operator = item.OPERATOR;
                const pass = parseInt(item.PASS, 10) || 0;
                counts[operator] = (counts[operator] || 0) + pass;
                return counts;
            }, {});
            const maxPass = Object.values(passCounts).reduce((max, current) => Math.max(max, current), 0);
            const maxPassOperators = Object.keys(passCounts).filter(operator => passCounts[operator] === maxPass);
            var operator = maxPassOperators[0];

            function dev_op_hour_prod_chart(tester, operator) {
                const dev_op_hour_data = Tab.Tab5.filter(item => item.TESTER == tester && item.OPERATOR == operator);
                var xData = dev_op_hour_data.map(function (item) {
                    return parseInt(item.HOUR);
                });
                var pass = dev_op_hour_data.map(function (item) {
                    return item ? parseInt(item.PASS) : 0;
                });
                var abort = dev_op_hour_data.map(function (item) {
                    return item ? parseInt(item.ABORT) : 0;
                });
                var fail = dev_op_hour_data.map(function (item) {
                    return item ? parseInt(item.FAIL) : 0;
                });
                var yield = dev_op_hour_data.map(function (item) {
                    return item ? parseInt(item.YIELD) : 0;
                });
                var InputData = dev_op_hour_data.map(function (item) {
                    return item ? item.INPUT : 0;
                });
                var vaulemax = Math.max.apply(null, InputData);
                var yAxismax = Math.ceil(vaulemax) + (10 - Math.ceil(vaulemax) % 10);
                var ChartTo = document.getElementById("dev_op_hour_prod_chart");
                if (ChartTo) {
                    echarts.dispose(ChartTo);
                }
                var myToChart = echarts.init(ChartTo);
                var options = {
                    label: {
                        show: true,
                        color: 'white',
                        fontSize: '0.12rem',
                        fontWeight: 'bold'
                    },
                    title: {
                        text: `员工${operator}`,
                        textStyle: {
                            fontSize: '0.14rem',
                            textAlign: 'center'
                        }
                    },
                    textStyle: {
                        fontSize: '0.1rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        textStyle: {
                            fontSize: '0.12rem',
                            align: 'left'
                        },
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['PASS', 'ABORT', 'FAIL', 'YIELD'],
                        width: '100%',
                        itemGap: 10,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            fontSize: '0.12rem'
                        }
                    },
                    grid: {
                        top: '25%',
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis:
                    {
                        yAxisIndex: 9,
                        type: 'category',
                        data: xData.map(item => item + ':00'),
                        textStyle: {
                            fontSize: '0.12rem'
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                fontSize: '0.12rem'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            max: yAxismax + (yAxismax / 5),
                            interval: Math.ceil((yAxismax + (yAxismax / 5)) / 6),
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 0,
                            max: 120,
                            interval: 20,
                            scale: true,//刻度范围一致
                            splitLine: { show: false },
                            axisTick: { //y轴刻度线
                                show: true
                            },
                            axisLine: { //y轴
                                show: true
                            },
                            axisLabel: {
                                interval: 0,
                                formatter: function (value) {
                                    return value + '%';
                                },
                                textStyle: {
                                    fontSize: '0.14rem',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            data: fail.map(item => parseInt(item) > 0 ? item : null),
                            name: 'FAIL',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#FF3374',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: abort.map(item => parseInt(item) > 0 ? item : null),
                            name: 'ABORT',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    color: '#F47E56',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            data: pass.map(item => parseInt(item) > 0 ? item : null),
                            name: 'PASS',
                            type: 'bar',
                            stack: 'stack1',
                            barCategoryGap: '50%',
                            barWidth: '40%',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    color: '#07C160',
                                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                                }
                            }
                        },
                        {
                            name: 'YIELD',
                            type: 'line',
                            yAxisIndex: 1,
                            data: yield.map(item => parseInt(item) > 0 ? item : 0),
                            lineStyle: { normal: { width: 3 } },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(237, 178, 23, 0.5)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(237, 178, 23, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 12
                                }
                            },
                            itemStyle: { normal: { color: '#EDB217 ' } },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) { return params.value + '%'; },
                                    color: '#E1AB19'
                                }
                            }

                        }
                    ]
                };
                myToChart.setOption(options);
                window.addEventListener('resize', function () {
                    myToChart.resize();
                });
            }

            $(".contentdetail").append(dev_hour_tab_html + dev_op_hour_tab_html + dev_op_hour_prod_tab_html);
            $(".show_mode").css("display", "block");
            dev_hour_data_chart();
            dev_op_hour_chart();
            dev_op_hour_prod_chart(tester, operator);
        }

        //4测试项趋势图
        var Detail_dev_hour_test_itme_Chart = function () {
            const tester = $('#tester-dropdown').val();
            const test_item = $('#item-dropdown').val();
            $(".contentdetail").empty();
            /*某台设备小时测试数据*/
            const dev_test_itme_data = Tab.Tab6.filter(item => (item.TESTER == tester && (test_item == 'ALL' || item.ITEM == test_item)));
            //动态生成表头
            var dev_test_itme_header = "";
            var dev_test_itme_header_keys = Object.keys(dev_test_itme_data[0]);
            dev_test_itme_header_keys.forEach(function (header) {
                dev_test_itme_header = dev_test_itme_header + '<th>' + header + '</th>';
            });
            //生成表体内容
            var dev_test_itme_tabtbody = '';
            dev_test_itme_data.forEach(function (row, index) {
                index++;
                var dev_test_itme_tdbody = '';
                dev_test_itme_header_keys.forEach(function (header, columnindex) {
                    var header_value = row[header] === null ? '' : row[header];
                    dev_test_itme_tdbody = dev_test_itme_tdbody + `<td class="truncate ${columnindex < 0 ? "ZebraTo" : null}">${header == "TEST_TIME" ? header_value.replace(/\T/g, '&emsp;') : header_value}</td>`;
                });
                var dev_test_itme_trbody = `<tr class="${(index % 2) > 0 ? "ZebraNo" : "ZebraTo"}">${dev_test_itme_tdbody}</tr>`;
                dev_test_itme_tabtbody = dev_test_itme_tabtbody + dev_test_itme_trbody;
            });
            var dev_test_time_tab_html = `
            <div style="height:50%;width:100%;"><label>设备${tester}测试项趋势图</label>
                <div id="dev_test_itme_Chart" class="dev_test_itme_Chart" style="color:black; width:100%;height:4.8rem;background-color: #dfe4ee;"></div>
            </div>
            <div style="height:50%;width:100%;"><label>设备${tester}测试项数据列表</label>
            <div id="tester_table" style="color:black;width: 100%; height: 95%;">
                <table id="myTable" class="DataSheet" border="1" >
                    <thead><tr>${dev_test_itme_header}</tr></thead>
                    <tbody id="yield_tbody">${dev_test_itme_tabtbody}</tbody></table>
                </div>
            </div>`;
            var dev_test_itme_Chart = function () {
                var chartDom = document.getElementById("dev_test_itme_Chart");
                if (chartDom) {
                    echarts.dispose(chartDom);
                }
                var myChart = echarts.init(chartDom);
                // 获取所有不重复的itme值
                var dev_test_itme = Array.from(new Set(dev_test_itme_data.map(item => item.ITEM)));
                // 获取所有不重复的test_time值
                var test_test_time = Array.from(new Set(dev_test_itme_data.map(item => item.TEST_TIME)));
                 // 根据itme和time生成series数据
                var seriesData = dev_test_itme.map(itme => {
                    return {
                        name: itme,
                        type: 'line',
                        data: test_test_time.map(time => {
                            var item = dev_test_itme_data.find(d => d.ITEM === itme && d.TEST_TIME === time);
                            return item ? item.ITEM_VALUE : 0;
                        })
                    };
                });
                var option = {
                    textStyle: {
                        color: 'black',
                        fontSize: '0.16rem'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        //confine: true,
                        //appendToBody: true,
                        formatter: function (params) {
                            const autoWidth = Math.ceil(params.length / (params.length > 160 ? 50 : 30));
                            let tooltipHtml = `<span style="color: #666;font-size:0.14rem;font-weight: normal;">${params[0].axisValueLabel}</span><br/><div style="color: black;width: ${autoWidth * 220}px;display: flex;flex-flow: column wrap; justify-content: flex-start;height:${Math.ceil((params.length / autoWidth)) * 17}px; ">`
                            params.forEach((item) => {
                                tooltipHtml += `
                            <div style="font-size:0.12rem;width:${((1 / autoWidth) * 100)}%;height:0.18rem;display: flex;flex-flow: row nowrap; justify-content: flex-start;">
                                <span style="color: #666;font-size:0.12rem;font-weight: normal;flex: 1; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${item.marker}${item.seriesName}：</span>
                                <span style="color: black;font-size:0.12rem;float:right;margin-right: 10px;">${item.data}</span>
                            </div>`
                            });
                            tooltipHtml += `</div>`
                            return tooltipHtml;
                        },
                        position: (point, params, dom, rect, size) => {
                            let x = point[0];
                            let y = point[1];
                            const { contentSize, viewSize } = size;
                            const maxX = viewSize[0] - contentSize[0];
                            const maxY = viewSize[1] - contentSize[1];
                            if (x > maxX) {
                                x -= contentSize[0];
                            }
                            if (y > maxY) {
                                y = maxY
                            }
                            return [x, y];
                        },
                        textStyle: {
                            fontSize: '0.14rem'
                        },
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: 'black'
                            }
                        }
                    },
                    legend: {
                        show: true,
                        width: '100%',
                        type: 'scroll',
                        data: dev_test_itme,
                        itemWidth: 10,
                        itemHeight: 10,
                        scrollDataIndex: 0,
                        pageIconSize: [12, 12],
                        pageIconColor: '#666',
                        pageTextStyle: {
                            fontSize: '0.16rem',
                            color: 'black'
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: '0.16rem'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '1%',
                        bottom: '10%',
                        width: '93%',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: test_test_time.map(item => item.replace(/\T/g,' ')),
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'black',
                                fontSize: '0.14rem'
                            },
                            show: true
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: seriesData.map(function (data, index) {
                        return {
                            name: data.name,
                            type: 'line',
                            data: data.data
                        };
                    })
                };
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            $(".contentdetail").append(dev_test_time_tab_html);
            $(".show_mode").css("display", "block");
            dev_test_itme_Chart();
        }

    </script>
</body>
</html>
